import React from 'react'
import './sy.less'
import {Carousel} from 'element-react'
import {connect} from 'react-redux'
import {bannerlist} from '../../redux/action/bannerlist'
import Banner from './banner/banner'
import Minfo from './minfo/minfo'
import Trends from './trends/trends'
import All from './all/all'
import Links from './link/link'
import {trendUrl,lifeUrli,allUrl,codeUrl,cxUrl,lifeUrl,gjUrl} from "../../utils/paths"
import imgs from '../../img/github.jpg'
import {linkUrl,base} from "../../utils/paths"
import Calendar from 'vortex-calendar'
import axios from "axios";
import less from 'less';
import ColorPicker  from 'react-color';
let img:any  = imgs
const useEffect =  React.useEffect;
function Sy(props) {
    const [tit,setTit] = React.useState('');
    const [url,setUrl] = React.useState("");
    const [color,setColor] = React.useState('');
  
   useEffect(()=>{
       document.documentElement.scrollTop =0;
       sessionStorage.setItem('msave','true');
       let query:string = props.location.search;
       let type:string = decodeURIComponent(query.split('=')[1]);
       if(!query){
            setTit("最新文章");
            setUrl(allUrl);
            return;
       }
       setTit(type);
       if(type=='最新文章'){
         setUrl(allUrl);
       }
       if(type=='编程分享'){
        setUrl(codeUrl);
      }
      if(type=='程序人生'){
        setUrl(cxUrl);
      }
      if(type=='生活日记'){
        setUrl(lifeUrli);
      }
      if(type=='工具推荐'){
        setUrl(gjUrl);
      }
   },[])
    let [uinfo,setUinfo]:[any,Function] =React. useState([]);
    useEffect(()=>{
        axios.get(linkUrl).then((res)=>{
            let data = res.data;
            setUinfo(data.msg)
        })
    },[])

    function setTU(tit,url):any{
        setTit(tit);
        setUrl(url);
        props.history.push('/home/sy?type='+tit);
    }
    useEffect(()=>{ 
         setAcColor()  
    },[])
    function setAcColor(){
      setTimeout(() => {
      const dom:any = document.getElementsByClassName('el-icon-star-on')[0];
      const s = getComputedStyle(dom,null);
      setColor(s.getPropertyValue('color'));
      },200)
    }
    function setLessColor(color){
         setColor(color.hex)
         less.modifyVars({
          '@color': color.hex,
        });
        localStorage.setItem('theme-color',color.hex)
    }
   
    return (<div >
        <div className='home-aside animated  bounceInDown delay-1s' >
              <header className={'aside_header'}>版块</header>
              <ul>
                  <li style={{color:tit=='最新文章'?color:"#6b6b6b"}} onClick={setTU.bind(this,'最新文章',allUrl)}><i className={'el-icon-star-on'}></i>最新文章(记录自己的学习心得)</li>
                  <li style={{color:tit=='编程分享'?color:"#6b6b6b"}} onClick={setTU.bind(this,'编程分享',codeUrl)}><i className={'el-icon-share'}></i>编程分享(分享别人的编程经验)</li>
                  <li style={{color:tit=='程序人生'?color:"#6b6b6b"}} onClick={setTU.bind(this,'程序人生',cxUrl)}><i className={'el-icon-picture'}></i>程序人生(记录自己的程序人生)</li>
                  <li style={{color:tit=='生活日记'?color:"#6b6b6b"}} onClick={setTU.bind(this,'生活日记',lifeUrli)}><i className={'el-icon-date'}></i>生活日记(记录自己的生活日记)</li>
                  <li style={{color:tit=='工具推荐'?color:"#6b6b6b"}} onClick={setTU.bind(this,'工具推荐',gjUrl)}><i className={'el-icon-document'}></i>工具推荐(有用的工具集合)</li>
              </ul>
             <header className={'aside_header'}>精品网站</header>
               <div className={'url'}>
                   {uinfo.map((val,index)=>{
                       return (<div className={'url_item'} key={index}><a href={val.url} target={'_blank'}><img title={val.name} src={base+val.pjname} alt=""/></a></div>)
                   })}
               </div>
              
             
        </div>
        <div className="sy" style={{width:'57%',display:'inline-block'}}>
            <Banner></Banner>
            {/*<div className="iT">*/}
                {/*/!*<Minfo></Minfo>*!/*/}
                {/*<Banner></Banner>*/}
                {/*<Trends title={'最新文章'} url={allUrl}></Trends>*/}
            {/*</div>*/}
            <Trends title={tit} url={url}></Trends>
            {/*<Trends title={'编程分享'} url={codeUrl}></Trends>*/}
            {/*<Trends title={'程序人生'} url={cxUrl}></Trends>*/}
            {/*<Trends title={'生活日记'} url={lifeUrli}></Trends>*/}
            {/*<Trends title={'工具推荐'} url={gjUrl}></Trends>*/}
            {/*<Links></Links>*/}
        </div>
        <div className='home-aside aside_r'>
        <header className={'aside_header'}>日历</header>
               <div className='calendar'>
               <Calendar
               locale="zh"
  minDate="2017-06-01"
  maxDate="3017-09-15"
  onSelect={(v) => console.log(v)}
/>
               </div>
               <header className={'aside_header'}>主题切换</header>
               <div className={'aside_zt'}>
               <ColorPicker color={color} onChangeComplete={ setLessColor}/>
               </div>
        </div>

    </div>)
}
export default Sy
